<template>
  <div class="pop-container">
    <!-- 遮罩层 -->
    <div class="flip-book-container" v-if="popContainer">
      <!-- loading加载效果 -->
      <img
        src="@/assets/icon-loading.gif"
        alt=""
        v-if="!loading"
        class="spinImg"
      />
      <div class="close-container" @click="closePDF">
        <img
          src="@/assets/close-button.png"
          alt="关闭"
          title="关闭"
          class="close-img"
        />
      </div>
      <div class="magazine-viewport">
        <div class="file-name" >{{file.fileName}}</div>
        <div class="container">
          <div id="magazine" v-if="loading">
            <div v-for="(item, index) in pdfPicturePath" :key="`test_${index}`">
              <img
                :class="`text${item.page}`"
                :src="item.url"
                width="100%"
                height="100%"
              />
            </div>
            <!-- Next button -->
            <div ignore="1" class="next-button"></div>
            <!-- Previous button -->
            <div ignore="1" class="previous-button"></div>
          </div>
        </div>
      </div>
      <div class="footer-btn">
        <div class="action-btn" @click="openThumbnails">
          <img src="@/assets/icon-catagory.png" alt="目录" title="目录" />
        </div>
        <div class="action-btn" @click="autoPlay">
          <img src="@/assets/icon-play.png" alt="自动翻页" title="自动翻页" />
        </div>
        <div class="action-btn" @click="zoomIn">
          <img src="@/assets/zoom-out.png" alt="放大" title="放大" />
        </div>
        <div class="action-btn" @click="zoomOut">
          <img src="@/assets/zoom-in.png" alt="缩小" title="缩小" />
        </div>

        <div class="action-btn" @click="turnToFirst()">
          <img
            src="@/assets/icon-first.png"
            alt="回到第一页"
            title="回到第一页"
          />
        </div>
        <div class="action-btn" @click="previous()">
          <img src="@/assets/icon-left.png" alt="上一页" title="上一页" />
        </div>
        <div class="page-num">
          <input
            class="page-input"
            @blur="handleBlur"
            @focus="handleFocus"
            @keyup.enter="goToPage"
            type="text"
            id="pageInput"
          />
        </div>
        <div class="action-btn" @click="next()">
          <img src="@/assets/icon-right.png" alt="下一页" title="下一页" />
        </div>
        <div class="action-btn" @click="turnToLast">
          <img
            src="@/assets/icon-last.png"
            alt="跳转到最后一页"
            title="跳转到最后一页"
          />
        </div>
        <div class="action-btn" @click="resize">
          <img src="@/assets/icon-resize.png" alt="重置" title="重置" />
        </div>
        <div class="action-btn" @click="downLoadFile(file.fileName)">
          <img src="@/assets/icon-download.png" alt="下载" title="下载" />
        </div>
        <div class="action-btn" @click="fullScreenPart('.magazine-viewport')">
          <img src="@/assets/icon-fullscreen.png" alt="全屏" title="全屏" />
        </div>
      </div>

      <div ref="docView" v-show="false"></div>
      <!-- 翻书的音效 -->
      <audio id="audio" src="@/assets/flipsound.ogg"></audio>

      <!-- Thumbnails -->
      <div class="thumbnails" v-show="thumbnailsVisible">
        <div class="thumbnails-header">
          <div class="thumbnails-title">导航</div>
          <div class="icon-close" @click="closeThumbnails">
            <img src="@/assets/icon-close.png" />
          </div>
        </div>
        <ul v-if="getThumbnails.length > 0">
          <li
            :class="index == currentIndex ? 'active-item' : 'thumbnails-item'"
            @click="turnPage(2 * index, index)"
            v-for="(item, index) in getThumbnails"
            :key="index"
          >
            <div class="item-left" v-if="index === 0">
              <img :src="item.itemLeft" class="item-img" />
              <div class="sort-number">1</div>
            </div>
            <template v-if="getThumbnails.length % 2 === 0 && index > 0">
              <!-- 偶数页 -->
              <div class="item-left">
                <img :src="item.itemLeft" class="item-img" />
              </div>
              <div class="item-right">
                <img :src="item.itemRight" class="item-img" />
              </div>
              <div class="sort-number">{{ 2 * index }}-{{ 2 * index + 1 }}</div>
            </template>
            <template v-if="getThumbnails.length % 2 !== 0 && index > 0">
              <!-- 奇数页 -->

              <div class="item-left" v-if="index < getThumbnails.length - 1">
                <img :src="item.itemLeft" class="item-img" />
              </div>
              <div class="item-right" v-if="index < getThumbnails.length - 1">
                <img :src="item.itemRight" class="item-img" />
              </div>
              <div class="sort-number" v-if="index < getThumbnails.length - 1">
                {{ 2 * index }}-{{ 2 * index + 1 }}
              </div>
              <div class="item-left" v-if="index === getThumbnails.length - 1">
                <img :src="item.itemLeft" class="item-img" />
              </div>
              <div
                class="sort-number"
                v-if="index === getThumbnails.length - 1"
              >
                {{ 2 * index }}
              </div>
            </template>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// 引入需要文件
import $ from "jquery";
import * as PDFJS from "pdfjs-dist";
import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
import screenfull from 'screenfull'
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker;
import { disableControls, zoomTo, downloadFile, downloadFileByUrl} from "@/utils";
require("@/utils/turnjs4/lib/turn");
require("/public/lib/zoom.js");
export default {
  name: "PdfPreviewer",
  props: {
    // 文件
    // file:{
    //   type:Object,
    //   default:()=>{
    //     return {
    //       fileName:'turnjs4-api-docs.pdf',
    //       filePath:'/turnjs4-api-docs.pdf',
    //       downloadPath:'' //下载地址
    //     }
    //   }
    // },
    options:{
      type:Object,
      default:()=>({
        
      })
    }
  },
  data() {
    return {
      // 遮罩层
      popContainer: false,
      // 保存数据
      pdfPicturePath: [],
      currentIndex: 0, //控制缩略图展示
      // 当前加载中
      loading: false,
      pageNumber: "",
      pdfFileUrl: "",
      rightBorderImg: require("@/assets/right-border.png"),
      leftBorderImg: require("@/assets/left-border.png"),
      zoomInBool: false, //控制缩小放大
      thumbnailsVisible: false, //控制缩略图的显示隐藏
      timer: null, //定时器
      elementFull: false,
      file:{
          fileName:'turnjs4-api-docs.pdf',
          filePath:'/turnjs4-api-docs.pdf',
          downloadPath:'' //下载地址
        }
    };
  },

  computed: {
    getThumbnails() {
      let length = this.pdfPicturePath.length;
      let thumbnailsList = [
        {
          itemLeft: this.pdfPicturePath[0] && this.pdfPicturePath[0].url,
        },
      ];
      // 如果只有一页，则不需要在往下走下去了
      if (length < 2) {
        return thumbnailsList;
      }
      //如果是奇数，则取第一页为单页，剩下的为双开
      // 如果是偶数，则取第一页，最后一页是单页，剩下的为双开
      if (length % 2 == 0) {
        // 偶数

        for (let i = 1; i < length - 1; i++) {
          if (i % 2 != 0) {
            thumbnailsList.push({
              itemLeft: this.pdfPicturePath[i].url,
              itemRight: this.pdfPicturePath[i + 1].url,
            });
          }
        }
        //  加上最后一页
        thumbnailsList.push({
          itemLeft: this.pdfPicturePath[length - 1].url,
        });
      } else {
        // 奇数
        for (let i = 1; i < length; i++) {
          if (i % 2 != 0) {
            thumbnailsList.push({
              itemLeft: this.pdfPicturePath[i].url,
              itemRight: this.pdfPicturePath[i + 1].url,
            });
          }
        }
      }

      return thumbnailsList;
    },
  },
  mounted() {
    // this.initScreen()
  },
  methods: {
    init() {
      // Events for the next button
      var that = this;
      $(".next-button")
        .bind($.mouseEvents.over, function () {
          $(this).addClass("next-button-hover");
        })
        .bind($.mouseEvents.out, function () {
          $(this).removeClass("next-button-hover");
        })
        .bind($.mouseEvents.down, function () {
          $(this).addClass("next-button-down");
        })
        .bind($.mouseEvents.up, function () {
          $(this).removeClass("next-button-down");
        })
        .click(function () {
          $("#magazine").turn("next");
        });

      // Events for the next button

      $(".previous-button")
        .bind($.mouseEvents.over, function () {
          $(this).addClass("previous-button-hover");
        })
        .bind($.mouseEvents.out, function () {
          $(this).removeClass("previous-button-hover");
        })
        .bind($.mouseEvents.down, function () {
          $(this).addClass("previous-button-down");
        })
        .bind($.mouseEvents.up, function () {
          $(this).removeClass("previous-button-down");
        })
        .click(function () {
          $("#magazine").turn("previous");
        });

      // init Zoom
      $(".magazine-viewport").zoom({
        flipbook: $("#magazine"), //图书jq对象
        max: function () {
          return 1680 / $("#magazine").width(); //放大因数
        },
        // max: 1.2,
        duration: 1000, //动画过渡时间
      });
      this.resizeViewport();

      $("#magazine").addClass("animated");
    },
    /**
     * 查看pdf文件
     * @param {Object} item
     */
    openPDF() {
      this.pdfFileUrl = this.file.filePath;
      let that = this;
      that.popContainer = true;
     
      // 获取当前pdf
      that.readPdf(this.pdfFileUrl).then((res) => {
        $("#magazine").turn("center");
        $("#magazine").turn("page");
        console.log('res',res,$("#magazine"),that.page)
        setTimeout(() => {
          $("#magazine").turn({
            display: "double", //single double
            elevation: 50,
            duration: 1000,
            gradients: true,
            autoCenter: true,
            acceleration: true,
            page: 1,
            width: 1400,
            height: 800,
            when: {
              turning: function (e, page, view) {
                //   制造阴影
                console.log("this", this, that, page, view);

                that.setShadow(page, view);

                //    播放音乐
                var audio = document.getElementById("audio");
                setTimeout(()=>{
                  audio.play();
                },500)
                disableControls(page);

                if (view.indexOf(1) > -1) {
                  $("#pageInput").val(1 + "/" + that.num);
                } else if (that.num % 2 == 0 && view.indexOf(that.num) > -1) {
                  $("#pageInput").val(that.num);
                } else {
                  $("#pageInput").val(view[0] + "-" + view[1] + "/" + that.num);
                }
              },
              turned: function (event, page, view) {
                //当前页
                console.log("Current view: ", $(that).turn("view"));
                //总页数
                console.log(
                  "#magazine has " + $("#magazine").turn("pages") + " pages"
                );
                disableControls(page);
                if (page == 1) {
                  $(this).turn("peel", "br");
                }
              },
            },
          });
          // 监听鼠标滚动翻页
          $("#magazine").on("mousewheel DOMMouseScroll", function (e) {
            if (e.originalEvent.wheelDelta > 0) {
              $("#magazine").turn("previous");
            } else {
              $("#magazine").turn("next");
            }
          });

          that.init();
          // Using arrow keys to turn the page

          $(document).keydown(function (e) {
            var previous = 37,
              next = 39,
              esc = 27;

            switch (e.keyCode) {
              case previous:
                // left arrow
                $("#magazine").turn("previous");
                e.preventDefault();

                break;
              case next:
                //right arrow
                $("#magazine").turn("next");
                e.preventDefault();

                break;
              case esc:
                $(".magazine-viewport").zoom("zoomOut");
                e.preventDefault();

                break;
            }
          });

          $(window)
            .resize(function () {
              that.resizeViewport();
            })
            .bind("orientationchange", function () {
              that.resizeViewport();
            });
        });
      });
      // 开启遮罩层
    },
    closePDF() {
      this.loading = false;
      this.popContainer = false;
      this.thumbnailsVisible = false
      this.pdfPicturePath = [];
    },

    /*
     ** @param fileUrl pdf有效的查看地址
     **				（1、线上地址(如：http://www.xxx.com)
     **				2、本地public地址（例如：/static/view.pdf））
     ** @param  pdfPicturePath pdf转化的图片地址-用于放大查看所有pdf图片
     */
    readPdf(fileUrl) {
      return new Promise((resolve, reject) => {
        let that = this;
        that.pdfPicturePath = [];
        const loadingTask = PDFJS.getDocument(fileUrl);
        loadingTask.promise
          .then((pdf) => {
            if (pdf) {
             
              // pdf 总页数
              const pageNum = pdf.numPages;
              that.num = pageNum;
              $("#pageInput").val(1 + "/" + pageNum);

              // 根绝页数循环相应的canvas
              for (let i = 1; i <= pageNum; i++) {
                // 生成每页 pdf 的 canvas
                const canvas = document.createElement("canvas");

                canvas.id = "pageNum" + i;
                // 将 canvas 添加到 dom 中,docView(存放canvas的div)
                // (that.$refs as any).docView.append(canvas);
                that.$refs.docView.append(canvas);
                //getContext() 方法返回一个用于在画布上绘图的环境。
                const context = canvas.getContext("2d");
                that.openPage(pdf, i, context);
              }

              setTimeout(() => {
                that.exportImg(that).then((res) => {
                  resolve(res);
                });
              }, 0);
            }
          })
          .catch((reason) => {
            console.error("Error: " + reason);
          });
      });
    },
    setShadow(page, view) {
      const pagesTotalNum = $("#magazine").turn("pages");
      if (page != pagesTotalNum && page != 1) {
        $(".page").children(".pageShadow").remove();
        const leftHtmlStr = `	<div class="pageShadow" style='z-index:999;position: absolute;top: 0;right: 0; width: 15px;height: 100%;'>
			        <img src=${this.rightBorderImg} style="width:100%;height:100%">
		        </div>`;
        const rightHtmlStr = `	<div class="pageShadow" style='z-index:999;position: absolute;top: 0;left: 0; width: 15px;height: 100%;'>
			        <img src=${this.leftBorderImg} style="width:100%;height:100%">
		        </div>`;
        $(".even.p" + view[0]).append(leftHtmlStr);
        $(".odd.p" + view[1]).append(rightHtmlStr);
      }
    },
    calculateBound(d) {
      var bound = { width: d.width, height: d.height };

      if (bound.width > d.boundWidth || bound.height > d.boundHeight) {
        var rel = bound.width / bound.height;

        if (
          d.boundWidth / rel > d.boundHeight &&
          d.boundHeight * rel <= d.boundWidth
        ) {
          bound.width = Math.round(d.boundHeight * rel);
          bound.height = d.boundHeight;
        } else {
          bound.width = d.boundWidth;
          bound.height = Math.round(d.boundWidth / rel);
        }
      }

      return bound;
    },
    // Set the width and height for the viewport

    resizeViewport() {
      var width = $(window).width(),
        height = $(window).height(),
        options = $("#magazine").turn("options");

      $("#magazine").removeClass("animated");

      $(".magazine-viewport")
        .css({
          width: width,
          height: height,
        })
        .zoom("resize");

      if ($("#magazine").turn("zoom") == 1) {
        var bound = this.calculateBound({
          width: options.width,
          height: options.height,
          boundWidth: Math.min(options.width, width),
          boundHeight: Math.min(options.height, height),
        });

        if (bound.width % 2 !== 0) bound.width -= 1;

        if (
          bound.width != $("#magazine").width() ||
          bound.height != $("#magazine").height()
        ) {
          $("#magazine").turn("size", bound.width, bound.height);

          if ($("#magazine").turn("page") == 1)
            $("#magazine").turn("peel", "br");

          $(".next-button").css({
            height: bound.height,
            backgroundPosition: "-38px " + (bound.height / 2 - 32 / 2) + "px",
          });
          $(".previous-button").css({
            height: bound.height,
            backgroundPosition: "-4px " + (bound.height / 2 - 32 / 2) + "px",
          });
        }

        $("#magazine").css({ top: -bound.height / 2, left: -bound.width / 2 });
      }

      // var magazineOffset = $("#magazine").offset(),
      //   boundH = height - magazineOffset.top - $("#magazine").height(),
      //   marginTop = (boundH - $(".thumbnails > div").height()) / 2;

      // if (marginTop < 0) {
      //   $(".thumbnails").css({ height: 1 });
      // } else {
      //   $(".thumbnails").css({ height: boundH });
      //   $(".thumbnails > div").css({ marginTop: marginTop });
      // }

      // if (magazineOffset.top < $(".made").height()) $(".made").hide();
      // else $(".made").show();

      $("#magazine").addClass("animated");
    },

    // 自动翻页播放
    autoPlay() {
      let allPages = $("#magazine").turn("pages");

      if (!allPages) {
        this.resize();
      }

      this.timer = null;
      let currentPage = 0;
      this.timer = setInterval(() => {
        currentPage = $("#magazine").turn("page");
        if (currentPage === allPages || currentPage + 1 === allPages) {
          clearInterval(this.timer);
          this.timer = null;
          return;
        }
        this.next();
      }, 2000);
    },
    // 上一页
    previous() {
      $("#magazine").turn("previous");
    },
    // 下一页
    next() {
      $("#magazine").turn("next");
    },
    // 重置
    resize() {
      // 重新计算页面的大小
      $("#magazine").turn("resize");
      // 跳转到第一页
      $("#magazine").turn("page", 1);
      this.zoomOut(); //恢复默认的缩放系数
      // 停止自动翻页
      this.timer && clearInterval(this.timer);
      this.timer = null;
    },
    // 缩小
    zoomIn() {
      if (this.zoomInBool === false) {
        this.zoomInBool = true;
        $(".magazine-viewport").zoom("zoomIn");
      }

      // // Zoom event
      if ($.isTouch) $(".magazine-viewport").bind("zoom.doubleTap", zoomTo);
      else $(".magazine-viewport").bind("zoom.tap", zoomTo);
    },
    // 放大
    zoomOut() {
      if (this.zoomInBool === true) {
        this.zoomInBool = false;
        $(".magazine-viewport").zoom("zoomOut");
      }
    },
    handleFocus() {
      this.pageNumber = $("#pageInput").val();
      $("#pageInput").val("");
    },
    handleBlur() {
      if ($("#pageInput").val()) {
        return;
      }
      $("#pageInput").val(this.pageNumber);
    },
    // 跳转页面
    goToPage() {
      $("#magazine").turn("page", $("#pageInput").val());
    },
    // 翻页到第一页
    turnToFirst() {
      $("#magazine").turn("page", 1);
    },
    // 翻页到最后一页
    turnToLast() {
      let allPages = $("#magazine").turn("pages");
      $("#magazine").turn("page", allPages);
    },
    initScreen() {
      if (screenfull.enabled) {
        screenfull.on('change', this.screenChange)
      }
    },
    screenChange(){
      if(screenfull.isFullscreen){
        
      }else{
        
      }
    },
    // 指定元素全屏——指定元素必须设置id，且全屏函数只对id获取元素有效
    fullScreenPart(className) {
      console.log('screenfull.isEnabled',screenfull)
      const element = document.querySelector(className); // 指定全屏元素
      if (!screenfull.enabled) {
        alert('你的浏览器不支持全屏')
        return false
      }
    
       screenfull.request(element);
      this.elementFull = !this.elementFull; // 判断状态 决定是全屏还是退出全屏
       
    },
    // 打开缩略图
    openThumbnails() {
      this.currentIndex = 0;
      this.thumbnailsVisible = !this.thumbnailsVisible;
    },
    // 关闭缩略图
    closeThumbnails() {
      this.thumbnailsVisible = false;
    },
    // 翻页
    turnPage(page, index) {
      this.currentIndex = index;
      if (page == 0) {
        page = 1;
      }
      $("#magazine").turn("page", page);
    },
    /*
     ** @param loading pdf生成图片时的加载状态
     ** @param scale 控制 canvas显示的大小
     ** @param  pdfPicturePath pdf转化的图片地址-用于放大查看所有pdf图片
     */
    openPage(pdfFile, pageNumber, context) {
      let scale = 2;
      let that = this;
      pdfFile.getPage(pageNumber).then(function (page) {
        // reference canvas via context
        const viewport = page.getViewport(scale);
        let canvas = context.canvas;
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        canvas.style.width = "100%";
        canvas.style.height = "100%";
        let renderContext = {
          canvasContext: context,
          viewport: viewport,
        };
        page.render(renderContext);
        that.loading = false;
      });
      return;
    },
    // 处理canvas
    exportImg(self) {
      return new Promise((resolve, reject) => {
        let canvaslist = document.querySelectorAll("canvas");
        for (let i = 0; i < canvaslist.length; i++) {
          // let canvas = document.getElementById("pageNum" + (i + 1));
          // // 将 canvas 转成 base64 格式的图片
          // let base64ImgSrc = (canvas as any).toDataURL("image/png")
          // const img = document.createElement("img")
          // img.setAttribute('class', 'pdf-img');
          // img.src = base64ImgSrc
          // img.style.width = '100%';
          // // 将图片挂载到 dom 中
          //   (self.$refs as any).docView.append(img);
          let canvasNode = document.getElementById("pageNum" + (i + 1));
          // 处理我需要的数据
          let obj = {
            url: this.baseOfurL(canvasNode.toDataURL("image/png")),
            page: i,
          };
          this.loading = true;
          // 将 canvas 转成 base64 格式的图片
          this.pdfPicturePath.push(obj);
        }

        resolve(this.pdfPicturePath);
      });
    },
    // base64 转 imgurl
    baseOfurL(base64) {
      let file = this.base64ImgtoFile(base64); // 得到File对象
      return (
        window.webkitURL.createObjectURL(file) ||
        window.URL.createObjectURL(file)
      );
    },
    // 图片base64转blob数据流
    base64ImgtoFile(dataurl, filename = "file") {
      const arr = dataurl.split(",");
      const mime = arr[0].match(/:(.*?);/)[1];
      const suffix = mime.split("/")[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    },
    // 下载文件
    downLoadFile(fileName = "文件") {
      // 获取文件类型
      const fileType = this.file.filePath.substring(this.file.filePath.lastIndexOf('.') + 1)
      if(['pdf'].includes(fileType)){
         // 相对地址
      fetch(this.pdfFileUrl, {
        headers: new Headers({
          Origin: location.origin,
        }),
        mode: "cors",
      })
        .then((res) => {
          if (res.status == 200) {
            // 返回的.blob()为promise，然后生成了blob对象，此方法获得的blob对象包含了数据类型，十分方便
            return res.blob();
          }

          throw new Error(`status: ${res.status}.`);
        })
        .then((blob) => {
          downloadFile(blob, fileName);
        });
        
      }else{
        this.file.downloadPath && downloadFileByUrl(this.file.downloadPath, fileName)
        
      }
     
    },
  },
};
</script>

<style lang="scss" scoped>
.flip-book-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999999;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#magazine {
  width: 1400px;
  height: 800px;
  left: -700px;
  top: -400px;
}
.container {
  position: absolute;
  width: 1400px;
  height: 800px;
  top: 50%;
  left: 50%;
  margin: auto;
}

.shadow {
  -webkit-box-shadow: 0 4px 10px #fff;
  -moz-box-shadow: 0 4px 10px #fff;
  -ms-box-shadow: 0 4px 10px #fff;
  -o-box-shadow: 0 4px 10px #fff;
  box-shadow: 0 4px 10px #fff;
}

#magazine .turn-page {
  background-color: #ccc;
  background-size: 100% 100%;
}
.close-container {
  position: absolute;
  right: -40px;
  top: -40px;
  -webkit-app-region: no-drag;
  background-color: rgba(0, 0, 0, 50%);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  z-index: 9999999999;
  line-height: 80px;
  overflow: hidden;
  transition: background-color 0.15s;
  cursor: pointer;
}
.close-img {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 18px;
}

#magazine .page-wrapper {
  box-shadow: 0px 0px 0.625rem #fff;
}
.footer-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 46px;
  line-height: 46px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99000;
  img {
    width: 24px;
    height: 24px;
  }
}

.page-num {
  display: flex;
  align-items: center;
}
.action-btn {
  width: 42px;
  height: 46px;
  text-align:center;
  cursor: pointer;
}
.action-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.magazine-viewport .next-button,
.magazine-viewport .previous-button {
  width: 22px;
  height: 800px;
  position: absolute;
  top: 0;
}

.magazine-viewport .next-button {
  right: -22px;
  -webkit-border-radius: 0 15px 15px 0;
  -moz-border-radius: 0 15px 15px 0;
  -ms-border-radius: 0 15px 15px 0;
  -o-border-radius: 0 15px 15px 0;
  border-radius: 0 15px 15px 0;
}

.magazine-viewport .previous-button {
  left: -22px;
  -webkit-border-radius: 15px 0 0 15px;
  -moz-border-radius: 15px 0 0 15px;
  -ms-border-radius: 15px 0 0 15px;
  -o-border-radius: 15px 0 0 15px;
  border-radius: 15px 0 0 15px;
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .next-button-hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .previous-button-down {
  background-image: url(@/assets/arrows.png);
  background-position: -4px 370px;
  background-repeat: no-repeat;
}

.magazine-viewport .previous-button-down,
.magazine-viewport .next-button-down {
  background-color: rgba(0, 0, 0, 0.4);
}

.magazine-viewport .next-button-hover,
.magazine-viewport .next-button-down {
  background-image: url(@/assets/arrows.png);
  background-position: -38px 370px;
  background-repeat: no-repeat;
}

.magazine-viewport .zoom-in .next-button,
.magazine-viewport .zoom-in .previous-button {
  display: none;
}

.animated {
  -webkit-transition: margin-left 0.5s;
  -moz-transition: margin-left 0.5s;
  -ms-transition: margin-left 0.5s;
  -o-transition: margin-left 0.5s;
  transition: margin-left 0.5s;
}

.page-input {
  height: 20px;
  width: 80px;
  text-align: center;
  outline: none;
  color:#333;
}

.exit-message {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 10000;
}
.file-name{
  color:#fff;
  font-size:16px;
  margin:10px auto 0;
  text-align:center;
}

.exit-message > div {
  width: 140px;
  height: 30px;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font: 12px arial;
  line-height: 30px;
  color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

// 缩略图
.thumbnails {
  position: absolute;
  bottom: 46px;
  left: 0;
  top: 0;
  bottom: 46px;
  height: calc(100% - 50px);
  overflow-y: auto;
  padding: 30px 20px;
  padding-bottom: 40px;
  box-sizing: border-box;
  z-index: 9999999;
  background-color: rgba(39, 24, 26, 0.95);
  color: rgb(255, 255, 255);
}

.thumbnails ul {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.thumbnails li {
  display: block;
  width: 200px;
  list-style: none;
  margin: 10px 0;
  padding: 10px;
  cursor: pointer;
  opacity: 0.4;
  -webkit-transition: -webkit-transform 60ms;
  -moz-transition: -webkit-transform 60ms;
  -o-transition: -webkit-transform 60ms;
  -ms-transition: -webkit-transform 60ms;
  transition: -webkit-transform 60ms;
  border-radius: 4px;
}
.thumbnails li.active-item {
  opacity: 1;
}
.thumbnails li .item-left,
.thumbnails li .item-right {
  display: inline-block;
}
.thumbnails li .item-img {
  width: 90px;
}

.thumbnails li:hover {
  background: rgba(150, 150, 150, 0.2);
}

.thumbnails li .sort-number {
  color: #fff;
  text-align: center;
}

.thumbnails-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 256px;
  height: 30px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  background: #000;
  .icon-close {
    cursor: pointer;
    width: 30px;
  }
}

// .spinImg{
//     animation: spin 1s linear infinite;
// }
// @keyframes spin {
//   from { transform: rotate(0deg);}

//   50% { transform: rotate(180deg);}

//   to { transform: rotate(360deg);}

// }
</style>
